import { Tabs, Typography } from "@arco-design/web-react"
import { UserInfo } from "../../types/conversation";
import { UserListItem } from "./components/UserListItem";
const TabPane = Tabs.TabPane;

import './index.css'

interface UserList {
  data: Array<UserInfo>;
  currentUser: UserInfo;
  handleChangeUser: (user: UserInfo) => void;
}

export const UserList = (props: UserList) => {

  const { data, currentUser, handleChangeUser } = props;

  return <div className="user-list-wrapper">
    <Tabs
      defaultActiveTab='1'
    >
      <TabPane key='1' title='全部用户'>
        <Typography.Paragraph>
          {data.map((item) => {
            return <UserListItem handleChangeUser={handleChangeUser} isSelect={currentUser.id === item.id} data={item} />
          })}
        </Typography.Paragraph>
      </TabPane>
    </Tabs>

  </div>
}